<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>{{ object.specimen_name }}</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAXKGUlmNjdDfXVrMBMqxlZhTpH3CbXHjuCVmaTc5MkkU4wO1RRhTE3GQScrQeSswmqhlwaFpYi9J8qQ"
  type="text/javascript"></script>
</head>
<h1>{{ object.specimen_name }}</h1>
<div id="map" style="width: 70%; height: 300px; float: right;"></div>
<a href="/taxonomy/species/{{ object.species_id }}"><em>{{ object.species }}</em></a>
<p>Approx. {{ object.antiquity }} years old.</p>
<a href="http://maps.google.com/maps?f=q&hl=en&geocode=&q={{ object.latitude }},{{ object.longitude }}&ie=UTF8&ll={{ object.latitude }},{{ object.longitude }}&spn=0.008476,0.012553&z=4&iwloc=addr">Google Map</a>

<script type="text/javascript">
	    //<![CDATA[

	    if (GBrowserIsCompatible()) { 

	      function createMarker(point,html) {
	        var marker = new GMarker(point);
	        GEvent.addListener(marker);
	        return marker;
	      }

	      var map = new GMap2(document.getElementById("map"));
	    map.setCenter(new GLatLng({{ object.latitude }},{{ object.longitude }}), 8, G_PHYSICAL_MAP);
	 
	      var point = new GLatLng({{ object.latitude }},{{ object.longitude }});
	      var marker = createMarker(point)
	      map.addOverlay(marker);

	    }

	    else {
	      alert("Sorry, the Google Maps API is not compatible with this browser");
	    }

	    //]]>
	    </script>
